<div class='parent'>
    <label><strong>Click or Drag!</strong> Fires a click when the mouse button is released before a <code>mousemove</code> event, otherwise a drag event is fired. No extra configuration is necessary.</label>
    <div class='wrapper'>
        <div class='container' [dragula]='"seventh-bag"'>
            <div (click)='onclick("one")'>{{clicked.one ? "Clicked!" : "Clicking on these elements triggers a regular click event you can listen to."}}</div>
            <div (click)='onclick("two")'>{{clicked.two ? "Clicked!" : "Try dragging or clicking on this element."}}</div>
            <div (click)='onclick("three")'>{{clicked.three ? "Clicked!" : "Note how you can click normally?"}}</div>
            <div (click)='onclick("four")'>{{clicked.four ? "Clicked!" : "Drags don't trigger click events."}}</div>
            <div (click)='onclick("five")'>{{clicked.five ? "Clicked!" : "Clicks don't end up in a drag, either."}}</div>
            <div (click)='onclick("six")'>{{clicked.six ? "Clicked!" : "This is useful if you have elements that can be both clicked or dragged."}}</div>
            <div (click)='onclick("seven")'>{{clicked.seven ? "ZOMG, THAT TICKLES! PLEASE. STOP." : "Business as usual."}}</div>
        </div>
    </div>
    <pre>
      <code>
&lt;div [dragula]=&#039;&quot;seventh-bag&quot;&#039;&gt;&lt;/div&gt;

class WowExample &#123;
  public clicked: any = &#123;
    'one': false,
    'two': false,
    'three': false,
    'four': false,
    'five': false,
    'six': false,
    'seven': false
  };

  public onclick(key): void &#123;
    this.clicked[key] = true;
    setTimeout(() => &#123;
      this.clicked[key] = false;
    }, 2000);
  }
}
      </code>
    </pre>
</div>